<template>
  <div class="item">
    <img :src="`${isUse?'../../../../static/img/yhj_1.png':'../../../../static/img/yhj_2.png'}`" alt="">
    <!--<div class="selected" v-show="data.isSelect">已选</div>-->
    <div class="item_left">
      <p><span>￥</span>{{data.sum}}</p>
      <p>满{{data.condition}}元可用</p>
    </div>
    <div class="item_right">
      <p :class="!isUse?'yq':''">{{data.type==1?'通用红包':'店铺红包'}}</p>
      <p>有效期至{{data.deadline | formatDate}}</p>
    </div>
    <div class="use" v-if="isUse">可以使用</div>
    <div class="use use1" v-else>已过期</div>
  </div>
</template>

<script>
  import {formatDate} from '../../../methods/time';
  export default {
    name: "couponItem",
    props:['data'],
    filters: {
      formatDate(time) {
        time = time * 1000;
        let date = new Date(time);
        return formatDate(date, 'yyyy/MM/dd')
      }
    },
    data(){
      return {
        isUse:false
      }
    },
    created() {
      // 获取服务器时间戳
      this.$myAxios('api/index/getTime','get',{}).then(res=>{
        if (res.data.code == 1) {
          if (this.data.starttime < res.data.time && this.data.deadline > res.data.time) {
              this.isUse = true;
          }
        }
      })
    }
  }
</script>

<style scoped>
  .item {
    width: 100%;
    height: 1rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-flow: row;
    align-items: center;
    margin-bottom: .1rem;
  }

  .item > img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }

  .item > div {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
  }

  .selected {
    font-size: .12rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #EC7636;
    background-color: #FFEA8B;
    width: .7rem;
    height: .17rem;
    line-height: .17rem;
    text-align: center;
    position: absolute !important;
    top: 5px !important;
    left: -22px !important;
    transform: rotate(-45deg);
    z-index: 0;
  }

  .item_left {
    width: 1.1rem;
    height: 1rem;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    color: #ffffff;
    text-align: center;
    box-sizing: border-box;
    padding: .15rem 0;
  }

  .item_left > p:nth-child(1) {
    font-size: .4rem;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: .4rem;
  }

  .item_left > p > span {
    font-size: .25rem;
  }

  .item_right {
    width: calc(100% - 1.5rem);
    height: 100%;
    box-sizing: border-box;
    padding: .25rem .22rem;
    display: flex;
    flex-flow: column;
    justify-content: space-between;

  }

  .item_right > p:nth-child(1) {
    color: #333333;
    font-size: .16rem;
    font-family: PingFang SC;
    font-weight: bold;
  }

  .item_right > p:nth-child(2) {
    color: #999999;
    font-size: .12rem;
    font-family: PingFang SC;
    font-weight: 500;
  }

  .use,.use1 {
    height: 100%;
    width: .4rem;
    color: #FF7D55;
    font-size: .12rem;
    font-family: PingFang SC;
    font-weight: 500;
    box-sizing: border-box;
    border-left: .01rem solid #E6E6E6;
    writing-mode: tb-rl;
    text-align: center;
    line-height: .4rem;
    letter-spacing: .03rem;
  }
  .use1 {
    color: #BFBFBF !important;
  }
  .yq {
    color: #999999 !important;
  }
</style>
